<template>
  <view class="container">
    <view v-for="(item, index) in videoList" :key="index" class="video-item">
      <!-- 左侧视频 -->
      <video 
        class="video"
        :src="item.videoUrl"
        :controls="false"
        :show-center-play-btn="true"
        :enable-play-gesture="true"
      />
      
      <!-- 右侧信息 -->
      <view class="info">
        <view class="date">发布日期：{{ item.date }}</view>
        <view class="goods-count">发布商品：{{ item.goodsCount }}个</view>
        
        <view class="button-group">
          <button class="btn edit-btn" @click="editVideo(index)">编辑</button>
          <button class="btn delete-btn" @click="deleteVideo(index)">删除</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoList: [
        {
          videoUrl: '/static/videos/demo1.mp4',
          date: '2024-01-20 17:05',
          goodsCount: 12
        },
        {
          videoUrl: '/static/videos/demo2.mp4',
          date: '2024-01-21 09:30',
          goodsCount: 8
        }
      ]
    }
  },
  methods: {
    editVideo(index) {
      uni.showToast({
        title: `编辑第${index + 1}条记录`,
        icon: 'none'
      })
      // 实际开发中这里跳转编辑页
    },
    deleteVideo(index) {
      uni.showModal({
        title: '提示',
        content: '确定要删除这条记录吗？',
        success: (res) => {
          if (res.confirm) {
            this.videoList.splice(index, 1)
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.container {
	background-color: #F5F5FA;
	padding: 20rpx;
}

.video-item {
  display: flex;
  margin-bottom: 30rpx;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}

.video {
  width: 158rpx;
  height: 181rpx;
  border-radius: 8rpx;
}

.info {
  flex: 1;
  margin-left: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.date {
  font-size: 28rpx;
  color: #666;
}

.goods-count {
  font-size: 28rpx;
  color: #666;
}

.button-group {
  display: flex;
  justify-content: flex-end;
  margin-top: 10rpx;
}

.btn {
  width: 120rpx;
  height: 60rpx;
  line-height: 60rpx;
  border-radius: 8rpx;
  font-size: 26rpx;
  margin-left: 20rpx;
  padding: 0;
}

.edit-btn {
  background-color: #CB423B;
  color: white;
}

.delete-btn {
  background-color: #FFFFFF;
  border: 1rpx solid #CB423B;
  color: #CB423B;
}
</style>